<template>
  <div>
    <a-form-model ref="form" slot="detail">
      <a-row>
        <div class="select-pk">
          <span>账户名称：</span>
          <span>{{record.accountName}}</span>
        </div>
        <div class="select-pk">
          <span>账户类型：</span>
          <span>{{getAccountTypeValue(record.accountType)}}</span>
        </div>
        <div class="select-pk">
          <span>会计科目：</span>
          <span>{{record.accountingSubject}}</span>
        </div>
        <div class="select-pk">
          <span>开户银行：</span>
          <span>{{record.bankInfo == null ? "无":record.bankInfo}}</span>
        </div>
        <div class="select-pk">
          <span>卡号：</span>
          <span>{{record.cardNo || '无'}}</span>
        </div>
        <div class="select-pk">
          <span>初始余额：</span>
          <span>{{record.initialMoney == null ? "无":rmb(record.initialMoney)}}</span>
        </div>
        <div class="select-pk">
          <span>账户余额：</span>
          <span>{{record.surplus == null ? "无":rmb(record.surplus)}}</span>
        </div>
        <div class="select-pk">
          <span>流入金额：</span>
          <span>{{record.inflow == null ? "无":rmb(record.inflow)}}</span>
        </div>
        <div class="select-pk">
          <span>流出金额：</span>
          <span>{{record.outflow == null ? "无":rmb(record.outflow)}}</span>
        </div>
        <div class="select-pk">
          <span>备注：</span>
          <span>{{record.remark}}</span>
        </div>
      </a-row>
    </a-form-model>
  </div>


  <!--<div>
    <a-form-model ref="form" slot="detail">
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="账户名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountName">
            <span>{{record.accountName}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="账户类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountType">
            <span>{{getAccountTypeValue(record.accountType)}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="会计科目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accountingSubject">
            <span>{{record.accountingSubject}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bankInfo">
            <span>{{record.bankInfo == null ? "无":record.bankInfo}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="卡号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cardNo">
            <span>{{record.cardNo}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="初始余额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="initialMoney">
            <span style="color: lightseagreen">{{record.initialMoney == null ? "无":rmb(record.initialMoney)}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="账户余额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="surplus">
            <span style="color: lightseagreen">{{record.surplus == null ? "无":rmb(record.surplus)}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="流入金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="inflow">
            <span style="color: lightseagreen">{{record.inflow == null ? "无":rmb(record.inflow)}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="流出金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="outflow">
            <span style="color: lightseagreen">{{record.outflow == null ? "无":rmb(record.outflow)}}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="labourBeginTime">
            <span>{{record.remark}}</span>
          </a-form-model-item>
        </a-col>

      </a-row>
    </a-form-model>
  </div>-->
</template>

<script>
  export default {
    name: "detailInfoTab",
    props: {
      record: {}
    },
    data() {
      return {
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
      }
    },
    methods: {
      getAccountTypeValue(value) {
        if (value == 1) {
          return "银行"
        } else if (value == 2) {
          return "现金"
        } else if (value == 3) {
          return "第三方"
        }
      },
      rmb(str) {
        let strArr = String(parseFloat(str).toFixed(2))
          .split('')//字符串按照''拆分成数组
          .reverse()//数组反转,方便计数
          .map((item, index) => {
            return index > 3 && !(index % 3) ? item + ',' : item; //包含小数点，5位以上才有逗号,注意index%3 要有括号包裹，
          });
        return strArr.reverse().join('');
      }
    }
  }
</script>

<style scoped lang="less">
  @import '~@assets/less/common.less';
  .select-pk{
    display:flex;
    align-items:center;
    margin:10px 0;
    &>span{
      font-weight: bold;
    }
    &-text{
      width: calc(100% - 6em);
      height: 30px;
      text-indent: 1em;
      line-height: 28px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
    }
  }
</style>